<template>
  <div class="container">
    <div class="feedback-hi" v-if="finished">
      <van-cell
        title="有什么意见和问题在这里告诉我们"
        label="需要您先选择下问题发生的场景，以便快速的处理您的问题"
        icon="service-o"
        size="large"
      />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="iserror"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, key) in list"
        v-bind:key="key"
        :title="item.name"
        :label="item.description"
        is-link
        :to="item.link"
      />
    </van-list>
    <div class="tips">
      <p>我们会及时处理您的反馈，并第一时间给您回复</p>
      <p>
        您还可以发送邮件至
        <a href="mailto:youyuedingzhi@163.com">youyuedingzhi@163.com</a>，或拨打客服电话
        <a href="tel:0537-2569688">0537-2569688</a>。
      </p>
    </div>
  </div>
</template>
<script>
import { Cell, List, Button } from 'vant'

export default {
  components: {
    [Cell.name]: Cell,
    [List.name]: List,
    [Button.name]: Button
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      show: true,
      iserror: false,
      visible: false
    }
  },
  computed: {
    url () {
      if (this.tpl) {
        return this.tpl
      }
      return this.data.format
    }
  },
  methods: {
    onLoad () {
      this.axios
        .get('/app/feedback', {
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          if (data && data.length > 0) {
            this.list = data
          }
          this.loading = false
          this.finished = true
          this.iserror = false
        })
        .catch(function (error) {
          console.log(error)
          this.loading = false
          this.finished = true
          this.iserror = true
        })
    },
    onFeedback () {
      this.$router.push({ name: 'feedback' })
    },
    onView (e) {
      console.log(e)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.feedback-hi {
  .van-cell--large {
    background: transparent;
    padding: 20px 15px;
    .van-cell__title {
      color: #fff;
    }
    .van-cell__label {
      font-size: 60%;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.8);
    }
    .van-cell__left-icon {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
